import React, { useState, useEffect, useContext } from 'react'
import { getNewPlanLaunchAnalysisDisplay } from '&/api/electricity'
import PlanMeasureCont1 from './PlanMeasureCont1'
import PlanMeasureCont2 from './PlanMeasureCont2'
import PlanMeasureCont3 from './PlanMeasureCont3'
import { LayoutContext } from '@/pages/layouts/context'

import './index.scss'


const MeasureTitle = ({title}) => {
  return <div className='plan-measure-title'>{title}</div>
}

const Measure = ({setListParam}) => {

  const {activePlan} = useContext(LayoutContext)
  const [data, setData] = useState()

  useEffect(() => {
    if(!activePlan) return;
    getNewPlanLaunchAnalysisDisplay({
      plan_id: activePlan.plan_id,
      start_time: activePlan.start_time,
      end_time: activePlan.end_time
    }).then(res => {
      setData(res)
    })
  }, [activePlan])

  return <div className='plan-measure'>
    <div className='plan-measure-1 plan-measure-tab'>
      <div><MeasureTitle title="预案监控情况"/></div>
      <div><PlanMeasureCont1 data={data} setListParam={setListParam} /></div>
    </div>
    <div className='plan-measure-2 plan-measure-tab'>
      <div><MeasureTitle title="预案监控全市用电量日变化" /></div>
      <div><PlanMeasureCont2 data={data} /></div>
    </div>
    <div className='plan-measure-3 plan-measure-tab'>
      <div><MeasureTitle title="预案监控全市企业结果"/></div>
      <div><PlanMeasureCont3 data={data} /></div>
    </div>
  </div>
}

export default Measure
